<template>
    <div class="main">
      <h2>Compose Mail</h2>
      <form @submit.prevent="sendMail">
        <input v-model="to" placeholder="To" />
        <input v-model="subject" placeholder="Subject" />
        <textarea v-model="body"></textarea>
        <button type="submit">Send</button>
      </form>
    </div>
  </template>
  <script>
  import { ref } from 'vue';
  export default {
    setup() {
      const to = ref('');
      const subject = ref('');
      const body = ref('');
      const sendMail = () => {
        // 假数据提交逻辑
        alert('Mail sent!');
      };
      return { to, subject, body, sendMail };
    }
  };
  </script>
  <style lang="less" scoped>
  .main form { display: flex; flex-direction: column; }
  .main form input, .main form textarea { margin-bottom: 12px; padding: 8px; }
  </style>